<template>
  <div class="app-market-manage">
    <el-form :model="requestParams"
             size="medium"
             ref="requestParams">
      <el-row :gutter="20"
              class="app-market-row">
        <el-col :span="24"
                class="app-market-tabs">
          <el-tabs v-model="requestParams.system_type"
                   @tab-click="handleClick">
            <el-tab-pane v-for="(item,i) in tabsArr"
                         :key="i"
                         :label="item.name"
                         :name="item.value"></el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="24"
                class="conditon-box">
          <el-col :span="8"
                  :offset="16">
            <el-form-item label-width="0px">
              <div class="condition-style">
                <el-input v-model="requestParams.system_name"
                          placeholder="请输入应用名称"
                          class="input-style">
                </el-input>
                <el-button size="medium"
                           class="search-style"
                           type="primary"
                           @click="onSearch">查询</el-button>
                <el-button size="medium"
                           style="margin-left:0px"
                           @click="onReset">重置</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="24"
                class="mid-container-box">
          <ul class="ul-style">
            <li v-for="(item,i) in menuArr"
                :key="i">
              <ul class="ul-style-child">
                <li>
                  <img :src="item.logo">
                </li>
                <li>
                  <div class="auth-right">
                    <span :title="item.system_name">{{item.system_name}}</span>
                    <el-button type="primary"
                               @click="onAppAuth(item)"
                               size="medium">申请授权</el-button>
                  </div>
                  <div class="auth-describle"
                       :title="item.description">
                    {{item.description}}
                  </div>
                </li>
              </ul>
            </li>
          </ul>
        </el-col>
        <el-col :span="24">
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="requestParams.page"
                         :page-sizes="[6]"
                         class="pagination-style"
                         :page-size="requestParams.page_size"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </el-col>
        <!-- 申请授权 -->
        <ApplicationAuthDialog :dialogTableVisible.sync="dialogTableVisible"
                               :sid.sync="sid"
                               :callBackFunc="callBackFunc"></ApplicationAuthDialog>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import ApplicationAuthDialog from './Components/ApplicationAuthDialog'
import { standardCodeApi } from "@/services/StandardCode";//标准码
import { ApplicationMarketManageApi } from '@/services/ResourceCentre'
export default {
  components: {
    ApplicationAuthDialog,//授权到组织
  },
  data () {
    return {
      menuArr: [],//所有的菜单
      dialogTableVisible: false,
      sid: '',
      tabsArr: [],//类型
      total: 0,
      requestParams: {
        system_type: '0',
        system_name: '',
        page: 1,
        page_size: 6,
        is_page: 1,
        show_menu: 1,
        system_status: 1//启用
      }
    }
  },
  methods: {
    //列表
    getAppList () {
      // this.menuArr = [];
      // this.total = 0;
      return ApplicationMarketManageApi.getAppList({
        params: this.requestParams
      }).then(res => {
        if (res.data) {
          this.menuArr = res.data.list;
          this.total = res.data.total_count;
          console.log('requestParams=', this.requestParams)
          // this.requestParams.page = res.data.page;//当前页
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    //类别标准码
    getAppTypeCode () {
      return standardCodeApi.getConsoleStandardCode({
        params: {
          code_type: 'systemType',
          is_page: 0//不分页
        }
      }).then((res) => {
        if (res.code == 0) {
          this.tabsArr = res.data.list;
          this.tabsArr.unshift({ name: '全部', value: '0' });
        }
      }).catch((error) => {
        console.log(error)
      });
    },
    callBackFunc (val) {//申请授权取消或确定时传参
      if (val == 'save') {
        this.onSearch();//刷新
      };
      this.sid = '';
      this.dialogTableVisible = false;

      console.log('222val=', val)
    },
    handleSizeChange (val) {//当前页显示的条数
      this.requestParams.page_size = val;
      this.handleCurrentChange(1)
    },
    handleCurrentChange (val) {
      this.requestParams.page = val;
      this.getAppList()
      console.log(val)
    },
    onAppAuth (item) {//申请授权
      console.log('item=', item)
      this.sid = item.sid;
      this.dialogTableVisible = true;
    },
    handleClick (tab, event) {//tab点击时触发的事件
      this.requestParams.page = 1;
      this.getAppList()
    },
    onSearch () {//查询
      this.handleCurrentChange(1)
    },
    onReset () {//重置
      this.requestParams = this.$options.data().requestParams;//重置
      this.onSearch()
    }
  },
  async created () {
    await this.getAppTypeCode();//类型标准码
    await this.handleCurrentChange(1);//列表
  }
}
</script>

<style lang="scss" scoped>
.app-market-manage {
  padding: 20px;
  padding-top: 0px;
  .pagination-style {
    margin-top: 5px !important;
  }
  .app-market-row {
    position: relative;
  }
  .conditon-box {
    position: absolute;
    right: 0;
    top: 22px;
    padding-right: 0px !important;
    .condition-style {
      display: flex;
      flex-direction: row;
      .input-style {
        // margin-right: 20px;
        margin-right: 0px;
      }
      .search-style {
        margin-left: 14px !important;
        margin-right: 14px !important;
      }
    }
  }
  .mid-container-box {
    .ul-style {
      width: 100%;
      li {
        width: calc(33% - 20px);
        height: 385px;
        margin-right: calc(0.5% + 20px);
        border: 1px solid #e6e6e6;
        float: left;
        margin-bottom: 20px;
        .ul-style-child {
          width: 100%;
          display: flex;
          flex-direction: column;
          position: relative;
          .auth-right {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            span {
              padding-right: 12px;
              line-height: 36px;
              font-size: 20px;
              font-weight: bolder;
              overflow: hidden;
              /* 强制文字不换行 */
              white-space: nowrap;
              /* 超出部分显示省略号 */
              text-overflow: ellipsis;
            }
          }
          .auth-describle {
            padding-left: 16px;
            padding-top: 20px;
            padding-bottom: 20px;
            height: 80px;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #7f7f7f;
            display: -webkit-box;
            -webkit-line-clamp: 3; /*想省略几行就写几*/
            -webkit-box-orient: vertical;
          }
          li:nth-child(1) {
            width: 100%;
            height: 230px;
            margin-bottom: 0px;
            img {
              width: calc(100% + 1px);
              height: 230px;
              position: absolute;
              left: -1px;
            }
          }
          li:nth-child(2) {
            padding: 20px;
            height: 150px;
            border: none;
            width: 100%;
          }
        }
      }
      li:nth-child(3n) {
        margin-right: 0px !important;
      }
      li:nth-child(3n - 1) {
        width: calc(34% - 20px);
        margin-right: calc(20px + 0.5%);
      }
    }
  }
}
</style>